<template>
  <div class="xFcityProps">
    <el-form-item label="选择城市"></el-form-item>
    <el-form-item>
      <el-select size="mini" v-model="selectL1" filterable @change="onSelectL1($event)" placeholder="请选择国家">
        <el-option value label="请选择国家"></el-option>
        <el-option :value="item.CountryID" :label="item.CountryName" v-for="(item, index) in level1" :key="index"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-select size="mini" v-model="selectL2" filterable @change="onSelectL2($event)" placeholder="请选择">
        <el-option value label="请选择"></el-option>
        <el-option :value="item.StationID" :label="item.StationName" v-for="(item, index) in level2" :key="index"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-select size="mini" v-model="selectL3" filterable @change="onSelectL3($event)" placeholder="请选择">
        <el-option value label="请选择"></el-option>
        <el-option :value="item.CityID" :label="item.CityName" v-for="(item, index) in level3" :key="index"></el-option>
      </el-select>
    </el-form-item>
  </div>
</template>

<script>
import cityJson from '@/assets/global-citys.json'
export default {
  name: 'attr-sxc-citySelect',
  props: {
    citySelect: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      level1: cityJson.Earth.Country,
      level2: [],
      level3: [],
      selectL1: '',
      selectL2: '',
      selectL3: '',
      tempValue: []
    }
  },
  watch: {
    citySelect (v1, v2) {
      if (JSON.stringify(v1) === JSON.stringify(v2)) {
        return false
      }
      this.initData()
    },
    tempValue (v1, v2) {
      if (JSON.stringify(v1) === JSON.stringify(this.citySelect)) {
        return false
      }
      this.change()
    }
  },
  created () {
    this.initData()
  },
  methods: {
    initData () {
      let list = []
      this.citySelect.forEach(item => {
        list.push(item)
      })
      this.tempValue = list
      const l1 = this.tempValue[0]
      if (!l1) return
      this.selectL1 = this.tempValue[0]
      const s1 = this.level1.find((item) => {
        return item.CountryID === l1
      })
      if (!s1) return
      this.level2 = s1.Station
      const l2 = this.tempValue[1]
      if (!l2) return
      this.selectL2 = l2
      const s2 = this.level2.find((item) => {
        return item.StationID === l2
      })
      if (!s2) return
      this.level3 = s2.City
      const l3 = this.tempValue[2]
      if (!l3) return
      this.selectL3 = l3
      const s3 = this.level3.find((item) => {
        return item.CityID === l3
      })
      if (!s3) return
    },
    getResultImageSrcList () {
      let list = []
      for (let i = 0, len = this.tempValue.length; i < len; i++) {
        list.push(this.tempValue[i])
      }
      return list
    },
    change () {
      this.$emit('update:citySelect', this.getResultImageSrcList())
    },
    onSelectL1 (ev) {
      if (ev) {
        this.selectL2 = '';
        this.selectL3 = '';
        this.level2 = [];
        this.level3 = [];
        delete this.tempValue[1];
        delete this.tempValue[2];
        const l = this.level1.find(item => {
          return ev === item.CountryID
        })
        this.level2 = l ? l.Station : []
      } else {
        this.level2 = []
      }
    },
    onSelectL2 (ev) {
        this.selectL3 = '';
        this.level3 = [];
        delete this.tempValue[2];
      if (ev) {
        const l = this.level2.find(item => {
          return ev === item.StationID
        })
        this.level3 = l ? l.City : []
      } else {
        this.level3 = []
      }
    },
    onSelectL3 (ev) {
      const { selectL1, selectL2 } = this
      this.tempValue = [selectL1, selectL2, ev]
    }
  }

}
</script>

<style lang="scss" scoped>
</style>
